// search.styl
$primary-color = #1890ff
$hover-color = #40a9ff
$border-color = #e8e8e8
$text-secondary = rgba(0,0,0,.45)
$shadow-color = rgba(0,0,0,0.1)

.search-page
  max-width 1200px
  margin 0 auto
  padding 24px
  background #fff
  min-height 100vh

  .search-header
    margin-bottom 32px
    
    .search-bar
      max-width 800px
      margin 0 auto 24px
      display flex
      box-shadow 0 2px 8px rgba(0,0,0,0.1)
      border-radius 4px
      overflow hidden
      transition all 0.3s
      
      &:hover
        box-shadow 0 4px 12px rgba(0,0,0,0.15)

      .category-select
        width 140px !important
        .ant-select-selector
          height 48px
          padding 0 16px
          border-radius 4px 0 0 4px !important
          border-right 0 !important
          font-size 16px
          display flex
          align-items center

      .search-input
        flex 1
        height 48px
        border-radius 0
        border-left 0 !important
        font-size 16px
        &:focus
          box-shadow none
          border-color $border-color

      .search-button
        width 120px
        height 48px
        border-radius 0 4px 4px 0
        font-size 16px
        display flex
        align-items center
        justify-content center
        background linear-gradient(135deg, $primary-color, lighten($primary-color, 15%))
        border none
        transition all 0.3s
        &:hover
          background linear-gradient(135deg, lighten($primary-color, 5%), lighten($primary-color, 20%))
          transform scale(1.02)

  .ant-list
    .torrent-item
      padding 24px !important
      margin 16px 0
      background #fff
      border-radius 8px
      border 1px solid $border-color
      transition all 0.3s
      position relative
      
      &:hover
        transform translateY(-2px)
        box-shadow 0 4px 12px $shadow-color
        border-color $primary-color
        .detail-btn
          opacity 1
          visibility visible
          transform translateY(0)

      .torrent-cover
        width 80px
        height 80px
        display flex
        align-items center
        justify-content center
        background #f5f7fa
        border-radius 4px
        overflow hidden
        img
          width 100%
          height 100%
          object-fit cover

      .torrent-title
        font-size 18px !important
        font-weight 500
        color $primary-color
        &:hover
          color $hover-color

      .torrent-description
        .size-info
          color $text-secondary
          margin 8px 0
          span
            margin-right 16px
          .upload-time
            color lighten($text-secondary, 20%)

        .excerpt
          color $text-secondary
          font-size 14px
          line-height 1.6
          display -webkit-box
          -webkit-line-clamp 2
          -webkit-box-orient vertical  
          overflow hidden

        .tag-container
          margin-top 12px

      .meta-stats
        display flex
        gap 24px
        .stat
          color $text-secondary
          .anticon
            margin-right 4px

      .category-tag
        border-radius 14px
        padding 0 12px
        .anticon
          margin-right 4px

      .detail-btn
        position absolute
        right 24px
        bottom 24px
        display flex
        align-items center
        opacity 0
        visibility hidden
        transition all 0.3s cubic-bezier(0.4, 0, 0.2, 1)
        padding 0 16px
        height 32px
        background linear-gradient(135deg, $primary-color, lighten($primary-color, 15%))
        border none
        color white
        border-radius 16px
        transform translateY(8px)
        &:hover
          background linear-gradient(135deg, lighten($primary-color, 5%), lighten($primary-color, 20%))
          box-shadow 0 4px 12px rgba($primary-color, 0.2)
          transform translateY(6px)

  .pagination
    margin-top 40px
    .ant-pagination
      .ant-pagination-item
        border-radius 50%
        &-active
          border-color $primary-color
          a
            color $primary-color
      
      .ant-pagination-prev,
      .ant-pagination-next
        .ant-pagination-item-link
          border-radius 50%

  .ant-spin-nested-loading
    min-height 400px
    .ant-spin
      max-height none !important
      .ant-spin-text
        color $primary-color
        text-shadow none
        margin-top 12px

@media (max-width 768px)
  .search-page
    padding 16px
    
    .ant-list
      .torrent-item
        padding 16px !important
        .torrent-cover
          width 60px
          height 60px
        .torrent-title
          font-size 16px !important
        .meta-stats
          flex-wrap wrap
          gap 8px
        .detail-btn
          position static
          margin-top 12px
          opacity 1
          visibility visible
          transform translateY(0)